اگر تاکنون از فایل های گرافیکی با فرمت PNG در طراحی صفحات وب خود استفاده کرده باشید، مطمئناً متوجه مشکل Internet Expelorer با این نوع فایل ها شده اید. همانطور که در شکل زیر مشاهده می کنید، IE نمی تواند آبجکت های گرافیکی با فرمت PNG (که اکثر آیکون های تحت وب نیز دارای این فرمت هستند) را به صورت ترانسپارنت (Transparent) نمایش دهد و فضاهای خالی آن را با کادری رنگی پرمی کند .این مشکل در IE باعث به هم خوردن تعادل گرافیکی وب سایت و درنتیجه کاهش زیبایی و جذابیت آن برای کاربران می شود. در این مقاله می خواهیم راه حل مناسب و آسانی را برای حل این مشکل ارائه کنیم.
برای رفع این Bug درIE ازیک فایل جاوا اسکریپت استفاده می کنیم.
Visual Studio را باز کنید و از منوی New گزینه File را انتخاب کنید.
در بخش Categories از کادر New File که باز شده است گزینه web را انتخاب کنید.
در بخش Templates از کادر New File گزینه J File را انتخاب و دکمه Open را کلیک کنید.
سورس کد زیر را در فایلی که باز شده است وارد کنید.
var arversion=navigtor.appversion.split(MSIE
var version=parsefloat(arversion[1]
if((version>=5.5)&&(document.body.filters
{
for(var i=0;i<document.images.length;++)
{
var img=document.images[i]
var imgName=img.src.toUpperCase
if(imgName.substring(imgName.length-3,imgName.
lingth)=="PNG)
{
ar imgID=((img.id)?"id="+img.id+
var imgClass=img.className)?"class=""+img.className+"":
var imgtitle=(img.titie)?"title=+"img.title+"" ":"title=""+img.alt+"" "
var imgstyle="display;inline-block;"+img.
style.cssText
if(image.algin=="left")imgStyle= "float: flet"+
imgStyle
if(img. align=="right") imgStyle= "Float: right"
+ imgStyle
if(img.parentElement.href)imgstyle="cursor:hand;"+imgstyle
var strNewHTML="<span"+imgID+imgclass+imgTitle
+"style=\""+"width:"+img.width+"px; height:"+img.height+"px;"+imgstyle+";"
+"filter:progid:DXLmageTransform.Microsoft.Alphalmageloader"
+"(scr=\""+img.src+"\",
sizingmethod="scale");\"></span>"
img.outerHTML=strNEWHTML
i=i-1
}
}
}
- از منوی file گزینه save را انتخاب کنید.
-درکادرsave file نام pngfix را به عنوان نام فایل وارد کرده و دکمه save را کلیک کنید.
-فایل pngfix.js را که ایجاد کرده اید در بخش Root پروژه خود درvisual studioکپی کنید.
-در تگ <Head> صفحاتی که می خواهید فایل های PNG به صورت Transparent نمایش داده شوند این کد را وارد کنید:
< [.if lt IE7]--!>-
< defer type="text/java" src="pngfix.js"></>-
<--[endif]!>-
منبع:نشریه دنیای کامپیوتر و ارتباطات شماره 83
